<script lang="ts" setup>
import {reactive} from "vue";
import {totaldata} from "../../api/order";

const list = reactive([
  {
    title: '总订单',
    num: '102400',
    icon: 'iconfont icon-dingdan',
  },
  {
    title: '总销售额',
    num: '102400',
    icon: 'iconfont icon-xiaoshoue1',
  },
  {
    title: '今日订单数',
    num: '102400',
    icon: 'iconfont icon-jinridingdanshu',
  },
  {
    title: '今日销售额',
    num: '102400',
    icon: 'iconfont icon-xiaoshoue',
  },
])

async function getData() {
  let res = await totaldata()
  let {todayOrder, totalAmount, totalOrder, totayAmount} = res.data
  list[0].num = totalAmount
  list[1].num = totayAmount
  list[2].num = todayOrder
  list[3].num = totalOrder
}

getData()
</script>
<template>
  <div id="homa-top">
    <div class="box" v-for="(item,index) in list" :key="index">
      <i :class="item.icon"></i>
      <div class="son">
        <p>{{ item.title }}</p>
        <p>{{ item.num }}</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
#homa-top {
  padding-top: 20px;
  display: flex;
  justify-content: space-around;

  .box {
    width: 22%;
    border-radius: 8px;
    height: 140px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: white;

    .son {
      text-align: center;
      line-height: 30px;
      font-size: 28px;

      p {
        font-size: 24px;
        color: #aaa;
      }

      span {
        font-weight: 600;
      }
    }
  }
}

// 设置iconfont字体颜色
.icon-dingdan {
  color: #38a7e1;
  font-size: 80px;
}

.icon-xiaoshoue1 {
  color: #d31f78;
  font-size: 80px;
}

.icon-jinridingdanshu {
  color: #1195db;
  font-size: 80px;
}

.icon-xiaoshoue {
  color: #18fa27;
  font-size: 80px;
}
</style>

